<!--
 * @Author: llgtfoo@163.com
 * @Date: 2020-08-10 21:58:59
 * @LastEditTime: 2020-09-14 08:57:28
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \npm-test\npm-test\plugins\selectDate\index.vue
 -->
<template>
  <div class="llgtfoo-select-date" :style="parentStyle">
    <div class="llgtfoo-select-box" :style="selectStyle">
      <p @click="showYear = !showYear">{{ currentYear }}年</p>
      <ul
        class="llgtfoo-dropSelect"
        v-if="showYear"
        :style="{ 'background-color': `${useStyleObj.dropBg}` }"
      >
        <li
          v-for="(item, index) in yearList"
          :key="index"
          :style="{
            'background-color': `${
              currentYearIndex === index ? useStyleObj.hoverBg : ''
            }`
          }"
          @mouseenter="currentYearIndex = index"
          @mouseleave="currentYearIndex = ''"
          @click="selectYear(item)"
        >
          {{ item }}年
        </li>
      </ul>
    </div>
    <div
      class="llgtfoo-select-box"
      :style="{
        'background-color': `${useStyleObj.bg}`,
        color: useStyleObj.fontColor
      }"
    >
      <p @click="showMonth = !showMonth">{{ currentMonth }}月</p>
      <ul
        class="llgtfoo-dropSelect"
        v-if="showMonth"
        :style="{ 'background-color': `${useStyleObj.dropBg}` }"
      >
        <li
          @mouseenter="currentMonthIndex = index"
          @mouseleave="currentMonthIndex = ''"
          v-for="(item, index) in 12"
          :style="{
            'background-color': `${
              currentMonthIndex === index ? useStyleObj.hoverBg : ''
            }`
          }"
          @click="selectMonth(item)"
          :key="index"
        >
          {{ item }}月
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectDate",
  props: {
    initYear: {
      type: [String, Number],
      default: new Date().getFullYear()
    },
    styleObj: {
      type: Object,
      default: () => ({
        bg: "rgba(11, 41, 82, 0.6)",
        dropBg: "rgba(11, 41, 82, 0.8)",
        hoverBg: "rgba(11, 41, 82, 1)",
        scale: 1,
        fontColor: "#0aa7ff"
      })
    }
  },
  computed: {
    selectStyle() {
      return {
        background: `${this.useStyleObj.bg}`,
        color: this.useStyleObj.fontColor
      };
    },
    parentStyle() {
      return {
        transform: `scale(${this.useStyleObj.scale})`
      };
    },
    //默认没填的项的值
    useStyleObj() {
      let bg = "rgba(11, 41, 82, 0.6)";
      let dropBg = "rgba(11, 41, 82, 0.8)";
      let hoverBg = "rgba(11, 41, 82, 1)";
      let scale = 0.8;
      let fontColor = "#0aa7ff";

      if (this.styleObj.dropBg) {
        dropBg = this.styleObj.dropBg;
      }
      if (this.styleObj.hoverBg) {
        hoverBg = this.styleObj.hoverBg;
      }
      if (this.styleObj.scale) {
        scale = this.styleObj.scale;
      }
      if (this.styleObj.bg) {
        bg = this.styleObj.bg;
      }
      if (this.styleObj.fontColor) {
        fontColor = this.styleObj.fontColor;
      }
      // console.log(bg,dropBg,hoverBg,scale,fontColor)
      return {
        bg,
        dropBg,
        hoverBg,
        scale,
        fontColor
      };
    }
  },
  data() {
    return {
      showMonth: false,
      showYear: false,
      currentMonth: "",
      currentYear: "",
      yearList: [],
      currentYearIndex: "",
      currentMonthIndex: ""
    };
  },
  mounted() {
    let initYear = this.initYear;
    let currentYear = new Date().getFullYear();
    this.currentYear = currentYear;
    this.currentMonth =
      new Date().getMonth() + 1 < 10
        ? `0${new Date().getMonth() + 1}`
        : new Date().getMonth() + 1;
    const section = new Date().getFullYear() - initYear;
    for (let i = 0; i <= section; i++) {
      this.yearList.push(initYear++);
    }
    this.$emit("getDate", { year: this.currentYear, month: this.currentMonth });
  },
  methods: {
    selectYear(year) {
      this.currentYear = year;
      this.showYear = false;
      this.$emit("getDate", {
        year: this.currentYear,
        month: this.currentMonth
      });
    },
    selectMonth(month) {
      this.currentMonth = month < 10 ? `0${month}` : month;
      this.showMonth = false;
      this.$emit("getDate", {
        year: this.currentYear,
        month: this.currentMonth
      });
    }
  }
};
</script>
<style lang="scss" scoped>
div {
  /* Scrollbar */
  ::-webkit-scrollbar {
    width: 0px;
    height: 8px;
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.05);
    -webkit-border-radius: 3px;
  }
  ::-webkit-scrollbar-track:active {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  :hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1);
  }
  ::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.6);
  }
  ::-webkit-scrollbar-track-piece,
  ::-webkit-scrollbar-track-piece {
    -webkit-border-radius: 0;
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:vertical,
  ::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:horizontal,
  ::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 3px;
  }
  .ivu-menu::-webkit-scrollbar {
    display: none;
  }
}
.llgtfoo-select-date {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 888;
  width: 600px;
  height: 100%;
  .llgtfoo-select-box {
    cursor: pointer;
    width: 280px;
    height: 70px;
    position: relative;
    // padding-right: 50px;
    color: #fff;
    font-size: 20px;
    // background: rgba(11, 41, 82, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    .llgtfoo-dropSelect {
      overflow: auto;
      width: 280px;
      max-height: 300px;
      position: absolute;
      top: 70px;
      left: 0;
      // background: rgba(11, 41, 82, 0.8);
      // border: 1px solid rgba(11, 41, 82, 0.6);
      box-sizing: border-box;
      li {
        list-style: none;
        cursor: pointer;
        box-sizing: border-box;
        font-size: 32px;
        font-family: FZLanTingHei-M-GBK Regular,
          FZLanTingHei-M-GBK Regular-Regular;
        font-weight: 400;
        text-align: center;
        // padding-left:60px;
        // color: #0aa7ff;
        line-height: 70px;
        &:hover {
          // background: rgba(11, 41, 82, 1);
          color: #fff;
        }
      }
    }
    p {
      cursor: pointer;
      width: 100%;
      height: 100%;
      font-size: 36px;
      font-family: FZLanTingHei-M-GBK Regular,
        FZLanTingHei-M-GBK Regular-Regular;
      font-weight: 400;
      text-align: center;
      line-height: 70px;
      // color: #0aa7ff;
    }
    &:after {
      content: "";
      width: 30px;
      height: 15px;
      position: absolute;
      right: 20px;
      top: 30px;
      background: url("./img/dir.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
